<template>
  <div class="about">
    <!-- <h1>This is an about page</h1>
    <div v-for="(item, index) in list" :key="'item' + index">
      <div>题目:{{ item.title }}</div>
      <div v-for="i in item.arr" :key="i.id">
        第{{ i.id }}个答案
        <input type="radio" value="true" v-model="i.choose" />{{ i.title }}
      </div>
    </div> -->
    {{ list[index] }}
    <div>
      <h5>题目:{{ list[index].title }}</h5>
      <div v-for="i in list[index].arr" :key="i.id">
        第{{ i.id }}个答案
        <input type="radio" value="true" v-model="i.choose" />{{ i.title }}
      </div>
    </div>
    <Asa></Asa>
    <input ref="input" /> <button @click="prev">上一题</button>{{ answer }}
    <button @click="next">下一题</button>
  </div>
</template>
<script lang="ts">
import {
  Component,
  Vue,
  Prop,
  Emit,
  Ref,
  PropSync,
  Model,
  Watch,
  Provide,
  ProvideReactive,
  Inject,
  InjectReactive,
} from "vue-property-decorator";
import { mapGetters, mapActions, createNamespacedHelpers } from "vuex";
// let { mapMutations: textMut } = createNamespacedHelpers("text");
// textMut(["printa"])
// import { mixins } from "vue-class-component";
import Asa from "./a.vue";
Component.registerHooks([
  "beforeRouteEnter",
  "beforeRouteLeave",
  "beforeRouteUpdate",
]);
@Component({
  computed: mapGetters(["posts"]),
  // beforeRouteLeave(to: any, from: any, next: any) {
  //   console.log("beforeRouteLeave");
  //   next();
  // },
  // beforeRouteEnter(to: any, from: any, next: any) {
  //   console.log("beforeRouteLeave");
  //   next();
  // },
  methods: { ...mapActions(["fetchPosts"]) },
  watch: {
    index: function (number: number) {
      console.log(number);
    },
  },
  // created () {},
  inheritAttrs: true,
  inject: [],
  provide: [],
  props: {},
  components: { Asa },
})
// @Component
// @Prop
// @PropSync
// @Model
// @Watch
// @Provide
// @Inject
// @ProvideReactive
// @InjectReactive
// @Emit
// @Ref
// @PropSync
// mixins(Super)
export default class Home extends Vue {
  private foo = "App Foo!";
  @Model("change", { type: String }) readonly checked!: string; // 组件的 v model
  @PropSync("like", { type: String }) syncedlike!: string; // 组件 的 sync
  private count: number = this.$store.state.count;
  @Watch("child", { deep: true, immediate: true })
  onChildChanged(newValue: string, oldValue: string): void {
    console.log(newValue);
    console.log(oldValue);
  }
  @Provide() foo1 = Symbol("fooaaa");

 asp ():void {
   this.syncedlike = '123'
 }

  @ProvideReactive() fooReactive = "fooReactive";

  @ProvideReactive("1") fooReactiveKey1 = "fooReactiveKey1";

  @ProvideReactive("2") fooReactiveKey2 = "fooReactiveKey2";
  @Prop(Boolean) private defaultArg: string | undefined;

  @Emit("delemit") private delEmitClick(event: MouseEvent) {
    console.log(event);
  }

  @Ref("aButton") readonly ref!: HTMLButtonElement;
  index = 0;
  list = [
    {
      title: "你好",
      answ: "1",
      arr: [
        { title: "a", value: "1", choose: false, id: 1 },
        { title: "a", value: "1s", choose: false, id: 2 },
        { title: "a", value: "1sa", choose: false, id: 3 },
        { title: "a", value: "1sa", choose: false, id: 4 },
      ],
    },
    {
      title: "你好",
      answ: "1",
      arr: [
        { title: "a", value: "1", choose: false, id: 5 },
        { title: "a", value: "1as", choose: false, id: 6 },
        { title: "a", value: "1as", choose: false, id: 7 },
        { title: "a", value: "1a", choose: false, id: 8 },
      ],
    },
  ];
  mounted(): void {
    console.log("mounted");
    this.$refs.input.focus();
  }
  @Inject() readonly foo2!: string;

  @InjectReactive() fooReactive12!: string;

  @InjectReactive("1") fooReactiveKey12!: string;

  @InjectReactive() fooReactiveKey22!: string;
  $refs!: {
    input: HTMLInputElement;
  };
  constructor() {
    super();
    // fetch('/posts.json')
    //   .then(res => res.json())
    //   .then(posts => {
    //     this.posts = posts
    //   })
  }
  // render () {
  //   return {}
  // }
  // beforeRouteEnter(to, from, next) {
  //   console.log("beforeRouteEnter");
  //   next();
  // }

  // beforeRouteUpdate(to, from, next) {
  //   console.log("beforeRouteUpdate");
  //   next();
  // }

  // beforeRouteLeave(to, from, next) {
  //   console.log("beforeRouteLeave");
  //   next();
  // }
  next(): void {
    if (this.answer.toString() === this.list[this.index].answ) {
      this.index = this.index + 1;
    } else {
      alert("错误");
    }
  }
  // print1(): void {}
  prev(): void {
    // this.$emit('')
    this.index = this.index - 1;
  }
  get answer() {
    let arr = this.list[0].arr
      .filter((res) => {
        return res.choose !== false;
      })
      .map((res) => {
        return res.value;
      });
    return arr;
  }
  set answer(value) {
    // const splitted = value.split(' ')
    // this.firstName = splitted[0]
    // this.lastName = splitted[1] || ''
  }
}
</script>
